<template>
    <div class="main-app">
        <ToolsBar :has-selected-code="hasSelectedCode" @copy-code="copyCode" @format-code="formatCode"
            @switch-theme="switchTheme" />
        <div class="main-container" p-10px m-10px rounded-4 bg-white dark="bg-dark border border-solid">
            工作计划
        </div>
    </div>
</template>
<script setup lang="ts">
import ToolsBar from "./components/ToolsBar.vue"
import { ref } from "vue"

const monacoEdit = ref<any>(null)

const hasSelectedCode = ref<boolean>(false)

function copyCode() {
    monacoEdit.value.copyCode()
}

function formatCode(style: string) {
    monacoEdit.value.formatCode(style)
}

function switchTheme() {
    monacoEdit.value.switchTheme()
}
</script> 

<style scoped lang="scss">
.main-app {
    border-color: rgba(#fff, .09);
}

.main-container {
    height: calc(100vh - 150px);
}
</style>
  
  